import { Component } from 'react';

import '../03/表单.css'
let data1 =[
  {
    label: '线上活动',
    name: '线上活动',
    checked: false
  },
  {
    label: '推广类',
    name: '推广类',
    checked: false
  },
  {
    label: '线下活动',
    name: '线下活动',
    checked: false
  },
  {
    label: '品牌介绍',
    name: '品牌介绍',
    checked: false
  },
]



class form extends Component {
  state = { 
    name:'前端前景技术发展交流', //活动名称
    city:'qingdao', //城市
    date1:'2203', //时间
    date2:'2.2', //时间
    phone:'1111111',//报名电话
    pration:'',//目前职业
    lexing:'',//类型
    sponsor:'0',//性别
    describe:"",//描述
    shw:false
   }
  Excursion =(e)=>{
    this.setState({
      name:e.target.value
    })
  }



  handleSelectCity = (e) => {
    console.log(e.target.value);
    this.setState({ 
      city: e.target.value
     })
  }


  optiondate = (e)=>{
    this.setState({
      date1:e.target.value
    })
  }

  optiondate2 = (e)=>{
    this.setState({
      date2:e.target.value
    })
  }


  shuphone = (e)=>{
    this.setState({
      phone:e.target.value
    })
  }


  shupration = (e)=>{
      this.setState({
        pration:e.target.value
      })
    }

  handleInput=(e,index)=>{
    console.log(e.target.checked);
    console.log(index);
    if (e.target.type === 'checkbox') {   //判断类型相等的时候把checked取反
      data1[index].checked = !data1[index].checked
   }

    let name = e.target.name
    let value = e.target.value
    this.setState({
      [name]: value,
      lexing:[name]
    })
  }

  // 活动赞助商
  radiosponsor = (e)=>{
    console.log(e.target.value);
    this.setState({
      sponsor:e.target.value
    })
  }

  // 描述
  textdescribe=(e)=>{
    console.log(e.target.value);
    this.setState({
      describe:e.target.value
    })
  }


  // 提交按钮
  submit=()=>{
    let data = {
      mingcheng:this.state.name,
      cs:this.state.city,
      nian:this.state.date1,
      ri:this.state.date2,
      dh:this.state.phone,
      zy:this.state.pration,
      hd:this.state.lexing, //活动类型
      zzs:this.state.sponsor,
      ms:this.state.describe,
      switch:this.state.shw
    }
    console.log('活动名称：',data);
  }

  // 重置按钮
  reset =()=>{
    this.setState({
      name:"",
      city:'',
      date1:'',
      date2:'',
      phone:'',
      lexing:[],
      sponsor:'',
      describe:'',
      pration:'',
      shw:false
    })
  }


  render() { 
    return ( 
      <>
        <div className='form'>

          {/* 活动名称 */}
          <div className='name'>
          活动名称：<input className='inpname' type="text" value={this.state.name} readOnly />{/*onChange={this.Excursion}*/}
          </div>

          {/* 城市 */}
          <div className='city'>
            <span>城市：</span>
            <select className='city2' value={this.state.city} onChange={this.handleSelectCity}>
              <option value="shandong">重庆</option>
              <option value="qingdao">青岛</option>
            </select>
          </div>

          {/* 日期 */}
          <div className='date'>
            日期：<input className='inpdate' value={this.state.date1} type="text" onChange={this.optiondate} />
             - -
             <input className='inpdate' value={this.state.date2} type="text" onChange={this.optiondate2} />
          </div>

          {/* 报名电话 */}
          <div className='phone'>
            报名电话：<input type="text" className='inphoe' value={this.state.phone} onChange={this.shuphone} />
          </div>

          {/* switch开关 */}
          <div className='switch'>
          <span className='spaqw'>允许电话沟通:</span>
            
          </div>

          {/* 目前职业 */}
          <div className='Pration'>
            目前职业：<input type="text" className='inpPration' value={this.state.pration} onChange={this.shupration} />
          </div>

          {/* 活动类型 */}
          <div className='activityType'>
            <span>活动类型：</span>
            {
              data1.map((item,index)=>{
                return (
                  <label key={index}>
                    <input type="checkbox" className='label' checked={item.checked} 
                    name={item.name} onChange={(e) => this.handleInput(e, index)}/>
                    {item.label}
                  </label>
                )
              })
            }
          </div>

          {/* 活动赞助商 */}
          <div className='eventSponsor'>
            <span>活动赞助商：</span>
            <label>
              <input type="radio" value='1' checked={this.state.sponsor==='1'} onChange={this.radiosponsor} />淘宝
            </label>
            <label>
              <input type="radio" value='2' checked={this.state.sponsor==='2'} onChange={this.radiosponsor} />京东
            </label>
          </div>

          {/* 描述 */}
          <div className='textarea'>
            <span className='miao'>描述：</span>
            <div>
              <textarea cols="30" rows="3" value={this.state.describe} onChange={this.textdescribe} />
            </div>
          </div>
          <div className='anniu'>
            <button className='ti7' onClick={this.submit}>提交</button>
            <button className='chong' onClick={this.reset}>重置</button>
          </div>

        </div>  
      </>
     );
  }
}
 
export default form;
